<template>
  <div>
    <div class="search">
      <nav-bar>
        <van-search
          v-model="value"
          @search="onSearch"
          shape="round"
          placeholder="搜索我的收藏"
        />
      </nav-bar>
    </div>
    <van-tabs v-model:active="activeName" @change="handleTabChange">
      <van-tab title="所有菜谱" name="a">
        <div class="history-list">
            <van-cell
              v-for="item in likeList"
              :key="item.recipeId"
              class="recipe-item"
              @click="gotoRecipeDetail(item.recipeId)"
            >
              <!-- 左侧：菜谱封面图 -->
              <template #icon>
                <img
                  src="https://tse1-mm.cn.bing.net/th/id/OIP-C.PMJNU-WNG3URabi5_254WwHaE4?w=245&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3"
                  class="recipe-cover"
                  alt="菜谱封面"
                  @error="handleImgError($event)"
                />
              </template>

              <!-- 右侧：标题 + 评分 + 作者 -->
              <template #title>
                <div class="right-content">
                  <div class="recipe-title">{{ item.recipeTitle }}</div>
                  <div class="recipe-meta">
                    <span class="viewCount"
                      ><van-icon name="eye-o" />{{ item.viewCount }}</span
                    >
                    <span class="viewer"
                      ><van-icon name="like-o" />{{ item.likeCount }}</span
                    >
                  </div>
                  <div class="author-info">
                    <van-image
                      class="author-avatar"
                      src="https://tse3-mm.cn.bing.net/th/id/OIP-C.y6rdSCGpxbfeb8Rd1CpSuwAAAA?w=171&h=190&c=7&r=0&o=5&dpr=1.3&pid=1.7 "
                      round
                      width="24"
                      height="24"
                      alt="作者头像"
                    />
                    <span class="authorName">{{ item.authorName }}</span>
                  </div>
                </div>
              </template>
            </van-cell>

            <!-- 空数据提示 -->
            <div
              v-if="recipeList.length === 0 && !refreshing"
              class="empty-tip"
            >
              你还没有收藏过哦，快去收藏自己喜欢的吧!
            </div>
          </div>
      </van-tab>
      <van-tab title="菜单" name="b">内容 2</van-tab>
      <van-tab title="课程" name="c">内容 3</van-tab>
      <van-tab title="浏览历史" name="d">
        <!-- 菜谱列表：下拉刷新+上拉加载 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <!-- 菜谱列表容器 -->
          <div class="history-list">
            <van-cell
              v-for="item in recipeList"
              :key="item.recipeId"
              class="recipe-item"
              @click="gotoRecipeDetail(item.recipeId)"
            >
              <!-- 左侧：菜谱封面图 -->
              <template #icon>
                <img
                  src="https://tse4-mm.cn.bing.net/th/id/OIP-C.rpfhFv_TyQpyU4LnhstbgQHaE5?w=264&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7"
                  class="recipe-cover"
                  alt="菜谱封面"
                  @error="handleImgError($event)"
                />
              </template>

              <!-- 右侧：标题 + 评分 + 作者 -->
              <template #title>
                <div class="right-content">
                  <div class="recipe-title">{{ item.recipeTitle }}</div>
                  <div class="recipe-meta">
                    <span class="viewCount"
                      ><van-icon name="eye-o" />{{ item.viewCount }}</span
                    >
                    <span class="viewer"
                      ><van-icon name="like-o" />{{ item.likeCount }}</span
                    >
                  </div>
                  <div class="author-info">
                    <van-image
                      class="author-avatar"
                      src="https://ts1.tc.mm.bing.net/th/id/OIP-C.JKAOWcVsAT4_-ac9QlmekAAAAA?w=214&h=211&c=8&rs=1&qlt=70&o=7&cb=thws5&dpr=1.3&pid=3.1&rm=3"
                      round
                      width="24"
                      height="24"
                      alt="作者头像"
                    />
                    <span class="authorName">{{ item.authorName }}</span>
                  </div>
                </div>
              </template>
            </van-cell>

            <!-- 空数据提示 -->
            <div
              v-if="recipeList.length === 0 && !refreshing"
              class="empty-tip"
            >
              暂无浏览记录，快去发现美食吧！
            </div>
          </div>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script setup>
import api from "@/api";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const value = ref(""); //搜索框绑定值
const activeName = ref("d"); //默认选中浏览历史
const recipeList = ref([]); //存储菜谱浏览记录
const likeList=ref([])
const refreshing = ref(false); //下拉刷新状态

const admin = JSON.parse(localStorage.getItem("admin"));
//未登录，跳转到登录页面
if (!admin?.id) {
  router.push("/login");
}

//获取收藏列表
const getLikeList=()=>{
  api.postReq("/favorite/getFavoriteList?userId="+admin.id).then((res=>{
    
    const result= res.data
    console.log(res.data)
    likeList.value=result.data
  }))
}

// 标签切换时触发
const handleTabChange = (name) => {
  // 切换到"所有菜谱"标签时加载数据
  if (name === 'a') {
    getLikeList();
  }
};

//下拉刷新
const onRefresh = () => {
  //标记正在刷新，防止重复请求
  refreshing.value=true
  api.postReq("/browseRecord/getRecipeRecordByUserId?userId=" + admin.id)
    .then((res) => {
      console.log(res.data);
      if (res.data.code === 1 && res.data.data) {
        const newData = res.data.data;
        recipeList.value = newData;
      } else {
        recipeList.value = [];
      }
    })
    .catch((error) => {
      console.error("获取浏览历史失败：", error);
      recipeList.value = [];
    })
    .finally(() => {
      refreshing.value = false;
    });
};

const gotoRecipeDetail = (item) => {
  router.push({
    path: "/recipe-detail",
    query: { id: item.recipeId },
  });
};

const handleImgError = (e) => {
  e.target.src = "https://via.placeholder.com/120x90?text=封面";
};

const onSearch = (val) => {
  console.log("搜索内容：", val);
};

onMounted(() => {
  onRefresh();
});
</script>
<style scoped>
/* 列表整体 */
.history-list {
  padding: 16px;
  background-color: #f5f5f5;
}

/* 单个菜谱项 */
.recipe-item {
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex; /* 横向布局 */
  align-items: center;
  transition: all 0.3s ease;
}
.recipe-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* 菜谱封面图 */
.recipe-cover {
  width: 120px;
  height: 90px;
  border-radius: 8px;
  object-fit: cover;
}

/* 右侧内容容器 */
.right-content {
  margin-left: 16px;
  flex: 1; /* 占满剩余宽度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 90px;
}

/* 菜谱标题 */
.recipe-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* 浏览量、点赞量容器 */
.recipe-meta {
  font-size: 13px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 16px;
}
.recipe-meta .van-icon {
  margin-right: 4px;
  font-size: 14px;
}
.recipe-meta .viewCount {
  color: #666;
}
.recipe-meta .viewer {
  color: #ff672b; /* 点赞橙色 */
}

/* 作者信息（带图标） */
.author-info {
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
}
.author-avatar {
  margin-right: 8px;
}
.authorName {
  font-weight: 500;
}

/* 空数据提示 */
.empty-tip {
  text-align: center;
  padding: 60px 0;
  color: #999;
  font-size: 16px;
}
</style>
